import React from 'react'
import {Button, Icon, message, Modal, Tooltip,  Card} from 'antd'
import Table from '../../../components/Table'
import 'whatwg-fetch'
import API from '../../../axios/api'
import { UserType } from '../../../utils/system-data'
import SearchBar from "../../../components/SearchBar";
import NetworkDataDetailList from './DetailList'
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";
require('es6-promise').polyfill();

const columns = [
    { dataIndex: 'HallName', title: '班级', width: 150, fixed: 'left'},
    { dataIndex: 'PartnerAmount', title: '合伙人数量',},
    { dataIndex: 'MemberAmount', title: '会员数量',},
    { dataIndex: 'FansAmount', title: '粉丝数',},
    { dataIndex: 'FansWeekPercentage', title: '周增长/下降粉丝',},
    { dataIndex: 'ShareAmount', title: '转发内容次数',},
    { dataIndex: 'OpenAmount', title: '浏览内容次数',},
    { dataIndex: 'GroupBuyingAmount', title: '发限活动总数',},
    { dataIndex: 'GroupBuyingShareAmount', title: '转发活动次数',},
    { dataIndex: 'GroupBuyingOpenAmount', title: '活动浏览人数',},
    { dataIndex: 'OrderAmount', title: '下单总数',},
    { dataIndex: 'SaleOrderAmount', title: '销售总额',},
    { dataIndex: 'PayOrderCount', title: '已付款下单数',},
    { dataIndex: 'PayOrderAmount', title: '已付款总额',},
];

@withRouter @inject('appStore') @observer
class NetworkDataStatistics extends React.Component {
    constructor(props) {
        super(props)
        let {user, rudder, rudderList, defaultrudderId,defaultrudderName} = this.props.appStore
        let newlist = [...rudderList]
        if(newlist[0] && newlist[0].mean != '总舵'){
            newlist.unshift({
                mean: "总舵",
                value: "-"
            })
        }
        this.state = {
            user: user,
            rudder: rudder,
            rudderList: newlist,
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowAddChild: false,
            rudderId: rudder.value,
            Page: 1,
            Pages:1,
            RudderId:defaultrudderId,
            defaultrudderName:defaultrudderName,
        }
    }

    componentWillReceiveProps(nextProps){
        let {user, rudder, rudderList, defaultrudderId,defaultrudderName} = this.props.appStore

         this.setState({
             user: user,
             rudder: rudder,
             rudderList: rudderList,
             RudderId:defaultrudderId,
             defaultrudderName:defaultrudderName,
         })
     }

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    // 获取表格数据
    fetchTableData =  async (searchFields) => {

        let parms = {
            Page:this.state.Page,
            PageSize: 10,
            RudderId: this.state.rudderId
        }
        await API.getRudderNetworkPage(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentDidMount() {
        this.fetchTableData()
    }

    tableAction = (actionKey, item) => {
        if (actionKey === 'detail') {
            this.setState({
                modalShowDetail: true,
                item: item,
            })
        }
    }

    add =() =>{
        this.setState({
            modalShow: true
        })
    }

    onOk = (param) =>{
        param.PermissionParentId = this.state.PermissionParentId
        API.addPermission(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                this.onCancel()
                this.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    onCancel = () =>{
        this.setState({
            modalShowDetail: false
        })
    }

    onSearch = (searchFields) => {
        this.setState({
            rudderId: searchFields.RudderId,
            Page:1
        },()=>{
            this.fetchTableData(searchFields)
        })
    }

    searchFields = () => {
        return [{
            title: '分舵名称',
            key: 'RudderId',
            type: 'select',
           //defaultValue: this.state.rudder.value,
            items: () => this.state.rudderList,

        }, ]
    }

    render() {
        return (
            <div id="wrap">
                {
                    /*
                    this.state.user && this.state.user.UserRankType === UserType.ADMIN  || this.state.user.RudderId == "-" ?
                        (<SearchBar
                            onSubmit={this.onSearch}
                            fields={this.searchFields()}
                        />): ''
                        */
                }
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            action={row => [
                                { key: 'detail', name: '昨日数据', color: 'blue', icon: 'ordered-list'},
                            ]}
                            style={styles.tableStyle}
                            scroll={{x: 1800  }}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                    <NetworkDataDetailList
                        modalKey="add"
                        visible={this.state.modalShowDetail}
                        title="昨日数据"
                        onOk={this.onOk}
                        onCancel={this.onCancel}
                        rudderId={this.state.rudderId}
                        dataId={this.state.item.Id}
                        width="90%"
                    />
                </div>
            </div>
        )
    }
}

const styles = {
    bg:{
        position:'absolute',
        top:0,
        left:0,
        width:'100%',
        height:'calc(100vh - 64px)'
    }
}
export default NetworkDataStatistics
